<template>
  <!-- 党员选择弹窗 -->
  <a-modal title="新增党员" :visible="true" @cancel="handleCancel" width="1200px">
    <a-row :gutter="10">
      <a-col :span="6" style="border-right: 1px solid #d9d9d9">
        <TreePartyOrg
          ref="treePartyOrg"
          @loader="refreshTable"
          :selectedKeys.sync="selectOrgs"
          :showChildWithSearch="true"
          :orgStatus="1"
        />
      </a-col>
      <a-col :span="18">
        <searchData ref="search" :showTitleName="false" :searchData="searchArr" @search="handleSearch"></searchData>
        <div class="tags-wrapper">
          <a-tag
            class="mb20"
            v-for="(item,index) in selectedList"
            :key="item.id"
            closable
            @close="removeTag(item,index)"
            color="#108ee9"
            >{{ item.userName }}</a-tag
          >
        </div>
        <s-table
          ref="table"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
        >
        </s-table>
      </a-col>
    </a-row>
    <template v-slot:footer>
      <div class="tool-btns">
        <a-button type="default" @click="handleCancel">取消</a-button>
        <a-button class="ml12" :loading="loadingState.all" type="primary" @click="handleSubmit('all')">全员提交</a-button>
        <a-button class="ml12" :loading="loadingState.part" type="primary" @click="handleSubmit('part')">选中提交</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import TreePartyOrg from '@/components/businessComponents/TreePartyOrg'
import BaseModal from '@/components/BaseModal'
import { STable } from '@/components'
import { getPartyMemberByOrg } from '@/api/partyMasses/partyManage/studyEduc.js'

const searchArr = [
  {
    name: '名称/员工编号/手机号码',
    value: 'conditions',
    type: 'input'
  }
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '党员名称',
    dataIndex: 'userName'
  },
  {
    title: '所在党支部',
    dataIndex: 'partyOrgName'
  },
  {
    title: '党内职务',
    dataIndex: 'partyPost',
    ellipsis: true
  },
  {
    title: '员工编号',
    dataIndex: 'employeeNum'
  },
  {
    title: '电话号码',
    dataIndex: 'phone'
  },
  {
    title: '职务',
    dataIndex: 'currentPost',
    ellipsis: true
  }
]
export default {
  name:'a'+ Date.now(),
  components: {
    BaseModal,
    TreePartyOrg,
    STable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectOrgs: [], // 选中的组织IDs
      selectedList: [], // 选中的党员列表
      selectedRowKeys: [],
      searchArr: searchArr,
      columns: columns,
      queryParam: {},
      loadingState: {
          all: false,
          part: false
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.treePartyOrg.getList().then(() => {
        this.refreshTable()
      })
    })
  },
  methods: {
      /**
       * 提交
       * @param {String} 'all' | 'part'   全员提交 | 选中提交
       */
      handleSubmit(actionName) {
          const actionMap = {
              all: async () => {
                  try {
                      if(this.loadingState[actionName]) return
                      this.loadingState[actionName] = true
                      const res = await getPartyMemberByOrg({pageNo: 1, pageSize: 999999, query: { ...this.queryParam, partyOrgId: this.selectOrgs[0] }})
                      this.$emit('ok', res?.data?.list || [])
                  } catch(e) {
                      console.error(e)
                  }
                  this.loadingState[actionName] = false
              },
              part: () => {
                  if(!this.selectedList.length) {
                      this.$message.warning('请勾选数据')
                      return
                  }
                  this.$emit('ok', this.selectedList)
              }
          }
          actionMap[actionName] && actionMap[actionName]()
      },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedList = selectedRows
    },
    removeTag(data, index) {
        const keyIndex = this.selectedRowKeys.find(key => key === data.id)
        this.selectedRowKeys.splice(keyIndex, 1)
        this.selectedList.splice(index, 1)
    },
    handleCancel() {
      this.$emit('cancel')
      this.$emit('update:visible', false)
    },
    handleSearch(val = {}) {
      this.queryParam = {
        ...val
      }
      this.refreshTable()
    },
    refreshTable() {
      this.$refs.table.refresh(true)
    },
    loadData(params) {
      const requestParams = {
        ...params,
        query: { ...this.queryParam, partyOrgId: this.selectOrgs[0] }
      }
      return getPartyMemberByOrg(requestParams).then((res) => {
        return {
          data: res.data.list,
          currentPage: res.data.pageNum,
          totalSize: res.data.total
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tags-wrapper {
  max-height: 100px;
  overflow-y: auto;
}
</style>